<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="order-warp" v-if="info">
			<view class="state">
				<text>发票状态：{{statesMap[info.agencyInvoice.status]}}</text>
			</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in info.orderProductList" :key="item.id">
					<u-image :src="item.picture" border-radius="16" width="128" height="128"></u-image>
					<view class="info">
						<view class="goods-name txt-hide2">{{item.goodsName}}</view>
						<view class="desc">
							<view class="price">¥<text>{{item.price}}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ibox" v-if="info">
			<u-cell-group v-if="info.agencyBilling.billingType == 1">
				<u-cell-item  title="发票类型：" :arrow="false">{{info.agencyBilling.invoiceTypeName}}</u-cell-item>
				<u-cell-item  title="开票类型：" :arrow="false">{{info.agencyBilling.billingTypeName}}</u-cell-item>
				<u-cell-item  title="姓名：" :arrow="false"  >{{info.agencyBilling.name}}</u-cell-item>
				<u-cell-item  title="邮箱：" :arrow="false"  >{{info.agencyBilling.email}}</u-cell-item>
				<u-cell-item  title="申请时间：" :arrow="false"  >{{info.agencyBilling.createTime}}</u-cell-item>
				<u-cell-item  title="订单号：" :arrow="false"  >{{info.order.orderSn}}</u-cell-item>
				<u-cell-item  title="备注：" :arrow="false" :border-bottom="false" >{{info.order.remark}}</u-cell-item>
			</u-cell-group>
			
			
			<u-cell-group v-else>
				<u-cell-item  title="发票类型：" :arrow="false">{{info.agencyBilling.invoiceTypeName}}</u-cell-item>
				<u-cell-item  title="开票类型：" :arrow="false">{{info.agencyBilling.billingTypeName}}</u-cell-item>
				<u-cell-item  title="单位名称：" :arrow="false"  >{{info.agencyBilling.name}}</u-cell-item>
				<u-cell-item  title="纳税人识别号：" :arrow="false"  >{{info.agencyBilling.taxpayerNumber}}</u-cell-item>
				
				<u-cell-item  title="单位地址：" :arrow="false"  >{{info.agencyBilling.address}}</u-cell-item>
				<u-cell-item  title="开户行：" :arrow="false"  >{{info.agencyBilling.openingBank}}</u-cell-item>
				<u-cell-item  title="银行账号：" :arrow="false"  >{{info.agencyBilling.bankAccount}}</u-cell-item>
				<u-cell-item  title="邮箱：" :arrow="false"  >{{info.agencyBilling.email}}</u-cell-item>
				
				<u-cell-item  title="申请时间：" :arrow="false"  >{{info.agencyBilling.createTime}}</u-cell-item>
				<u-cell-item  title="订单号：" :arrow="false"  >{{info.order.orderSn}}</u-cell-item>
				
				<u-cell-item  title="开票时间：" v-if="info.agencyInvoice.status == 3" :arrow="false"  >{{info.agencyInvoice.updateTime}}</u-cell-item>
				<u-cell-item  title="拒绝时间："  v-if="info.agencyInvoice.status == 1" :arrow="false"  >{{info.agencyInvoice.updateTime}}</u-cell-item>
			<!-- 	<u-cell-item  title="拒绝原因：" :arrow="false"  >资料不正确</u-cell-item>
				 -->
				<u-cell-item  title="备注：" :arrow="false" :border-bottom="false" >{{info.order.remark}}</u-cell-item>
			</u-cell-group>
		</view>
		
		
		
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            // ready: true,
			info: null,
			showDelivery:false,
			showSend:false,
			btnStyle:{
				background: '#497CD0',
				borderRadius: '16px',
				padding:'0 15px',
				marginLeft: '5px'
			},
			statesMap:{
				0:'待审核',
				1:'审核失败',
				2:'待开票',
				3:'已开票'
			},
			logValue:'顺丰',
			logistics:[
				{
					name: '顺丰',
					value:1,
				},
				{
					name: '申通',
					value:2,
				},
				{
					name: '韵达',
					value:3,
				},
			]
        };
    },
    onLoad(o) {
        that = this;
		if(o.id){
			this.id = o.id
		} 
		this.getInit();
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async getInit(){
			let res = await this.$api.invoiceInfo({
				id:this.id
			});
			if (res.data.code == this.$config.RESOK) {
				this.info =  res.data.data;
				this.ready=true
			} else {
				this.$message.error(res.data.msg);
			}
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}

.order-warp{
	background: #497CD0;
	padding: 24rpx 32rpx;
	.state{
		display: flex;
		color: #fff;
		align-items: center;
		.icon{
			width: 28px;
			height: 28px;
		}
		text{
			margin-left: 6px;
			font-size: 20px;
		}
	}
	.addres-wrap{
		margin-top: 40rpx;
		background: #fff;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 32rpx;
		.icon-add{
			width: 18px;
			height: 18px;
		}
		.info{
			flex: 1;
			padding-left: 20rpx;
		}
		.name{
			margin-right: 12px;
		}
		.addhead{
			margin-bottom: 4px;
		}
		.text{
			font-size: 14px;
		}
	}

}
.ibox{
	background: #fff;
	margin: 16rpx 32rpx;
	border-radius: 12px;
	padding: 0 32rpx;
}

.titlebox{
	display: flex;
	padding: 28rpx 0;
	align-items: center;
	.icon{
		width: 18px;
		height: 18px;
	}
	text{
		margin-left: 5px;
		font-size: 16px;
	}
}
.goods-list{
	border: 0;
	background: #fff;
	padding: 10rpx 30rpx;
	border-radius: 10px;
	margin-top: 20rpx;
	.goods-item{
		.goods-name{
			height: auto;
			max-height: 80rpx;
			line-height: 40rpx;
			margin-bottom: 5px;
		}
	}
}
.desc-text{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #8E8E9A;
	padding: 4px 0;
}
.order-foot{
	text-align: right;
	padding: 10rpx 30rpx;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	 background-color: #F8FAFD;
}

.send-popup{
	padding: 20rpx 30rpx;
	position: relative;
	.btn-close{
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	.title{
		text-align: center;
		font-size: 16px;
		margin-bottom: 20rpx;
	}
	.item{
		margin-bottom: 20rpx;
	}
	.label{
		font-size: 14px;
		margin-bottom: 6px;
	}
	.btnbox{
		padding-top: 30rpx;
	}
}
</style>
